<template>
  <div>
    <div v-for="(item,index)  in tableData" :key="index">
      <el-table
        :index="index"
        :data="item.list"
        border
        :show-header="index==0? !hideRow : hideRow"
        show-summary
        :summary-method="getSummaries"
        :span-method="objectSpanMethod"
        :header-cell-style="{background:'#F5F8FF',color:'#666666'}"
        style="width: 100%"
      >
        <el-table-column prop="departmentId" align="center" label="部门" width="80"></el-table-column>
        <el-table-column prop="date" align="center" label="日期" width="80"></el-table-column>
        <el-table-column prop="name" align="center" label="姓名" width="80"></el-table-column>
        <el-table-column label="餐费" align="center">
          <el-table-column prop="date" align="center" label="金额" width="100"></el-table-column>
        </el-table-column>
        <el-table-column label="加班交通费" align="center">
          <el-table-column prop="jinnum" align="center" label="金额" width="100"></el-table-column>
          <el-table-column prop="date" align="center" label="税额" width="100"></el-table-column>
          <el-table-column prop="date" align="center" label="价税合计" width="100"></el-table-column>
        </el-table-column>
        <el-table-column label="办事交通费" align="center">
          <el-table-column prop="date" align="center" label="金额" width="100"></el-table-column>
          <el-table-column prop="date" align="center" label="税额" width="100"></el-table-column>
          <el-table-column prop="heji" align="center" label="价税合计" width="100"></el-table-column>
        </el-table-column>
        <el-table-column prop="date" align="center" label="小计" width="80"></el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      spanArr: [],
      pos: 0,
      hideRow: false,
      tableData: [
        {
          num: 11,
          list: [
            {
              departmentId: "财务部",
              name: "张安",
              jinnum: 34,
              heji: 7,
              num: 11,
              num1: 89
            },
            {
              num: 11,
              departmentId: "财务部",
              name: "张胜男",
              jinnum: 34,
              heji: 7
            },
            {
              num: 11,
              departmentId: "财务部",
              name: "火狐",
              jinnum: 34,
              heji: 7
            }
          ]
        },
        {
          num: 70,
          list: [
            {
              num: 70,
              departmentId: "人事部",
              name: "对对对",
              jinnum: 34,
              num1: 5
            },
            {
              num: 70,
              departmentId: "人事部",
              name: "对对火",
              jinnum: 34
            }
          ]
        }
      ]
    };
  },
  created() {
    // this.listPage();
    this.getSpanArr(this.tableData);
  },
  methods: {
    
    getSpanArr(data) {
      for (var i = 0; i < data.length; i++) {
        // console.log("data==" + JSON.stringify(data[i]));
        let arrdata = data[i].list;
        for (var j = 0; j < arrdata.length; j++) {
          if (j === 0) {
            this.spanArr.push(1);
            this.pos = 0;
          } else {
            // 判断当前元素与上一个元素是否相同
            if (arrdata[j].departmentId === arrdata[j - 1].departmentId) {
              this.spanArr[this.pos] += 1;
              this.spanArr.push(0);
            } else {
              this.spanArr.push(1);
              this.pos = i;
            }
          }
        }
      }
    },

    //里面包含当前行row、当前列column、当前行号rowIndex、当前列号columnIndex四个属性
    //该函数可以返回一个包含两个元素的数组，第一个元素代表rowspan，
    // 第二个元素代表colspan。 也可以返回一个键名为rowspan和colspan的对象。
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      // console.log("row==" + JSON.stringify(row));
      // // console.log("column=="+JSON.stringify(column))
      console.log("rowIndex==" + rowIndex );
      // console.log("columnIndex==" + columnIndex);

        if (columnIndex === 0) {
          const _row = this.spanArr[rowIndex];
          const _col = _row > 0 ? 1 : 0;
          return {
            rowspan: _row,
            colspan: _col
          };

          console.log(_col + "===_row==" + _row);
        }
       
      
    },
    //小计
    getSummaries(param) {
      const { columns, data } = param;
      // console.log("自定义行num===" + JSON.stringify(param));

      const sums = [];
      columns.forEach((column, index) => {
        //  console.log("嗯嗯嗯===" + JSON.stringify(column));
        switch (index) {
          case 1:
            sums[index] = "小计";
            break;
          case 3:
            sums[index] = data[0].num;
            break;
          case 4:
            sums[index] = "人数";
            break;
          case 5:
            sums[index] = "人数";
            break;
          case 6:
            sums[index] = "人数";
            break;
          case 7:
            sums[index] = "人数";
            break;
          case 8:
            sums[index] = "人数";
            break;
          case 9:
            sums[index] = "人数";
            break;
          case 10:
            sums[index] = data[0].num1;
            break;
        }
      });
      return sums;
    }
  }
};
</script>

<style lang="scss" scoped>
.table-column {
  align-content: center;
  flex-direction: column;
}
</style>